<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:c="http://java.sun.com/jstl/core"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<ui:composition template="desktop.xhtml">


	<ui:define name="body">
	<p:growl id="messages" showDetail="true" />
		<h:form styleClass="letraForm" id="frmAltaCliente">
			
			<p:panelGrid>
				<f:facet name="header">
					<p:row style="width:100%">
						<p:column colspan="8">Datos personales</p:column>
					</p:row>
				</f:facet>
				<p:row>
					<p:column>
						<p:graphicImage value="/pages/imgs/altaCliente.png" />
					</p:column>
					<p:column>
						<p:spacer width="10px" />
					</p:column>
					<p:column>
						<h:outputLabel value="Razón Social: " />
					</p:column>
					<p:column colspan="3">
						<p:inputText size="60" id="txtRazonSocial"
							value="#{detalleAction.cliente.razonSocial}" style="font-weight:bold; font-size:15px; color:#008B8B; background-color:#F8F8FF" />
					</p:column>
					<p:column>
						<h:outputLabel value="R.F.C.: " />
					</p:column>
					<p:column>
						<p:inputText size="10" id="txtRfc"
							value="#{detalleAction.cliente.rfc}" style="font-weight:bold; font-size:15px; color:#008B8B; background-color:#F8F8FF" />
					</p:column>
				</p:row>
				<p:row>
					<p:column>
						<h:outputLabel value="Nombre: " />
					</p:column>
					<p:column>
						<p:inputText size="10" id="txtNombre"
							value="#{detalleAction.cliente.nombre}" style="font-weight:bold; font-size:15px; color:#008B8B; background-color:#F8F8FF"/>
					</p:column>
					<p:column>
						<h:outputLabel value="A. Paterno: " />
					</p:column>
					<p:column>
						<p:inputText size="10" id="txtApaterno"
							value="#{detalleAction.cliente.aPaterno}" style="font-weight:bold; font-size:15px; color:#008B8B; background-color:#F8F8FF"/>
					</p:column>
					<p:column>
						<h:outputLabel value="A. Materno: " />
					</p:column>
					<p:column>
						<p:inputText size="10" id="txtAmaterno"
							value="#{detalleAction.cliente.aMaterno}" style="font-weight:bold; font-size:15px; color:#008B8B; background-color:#F8F8FF"/>
					</p:column>
					<p:column>
						<h:outputLabel value="Profesión: " />
					</p:column>
					<p:column>
						<p:inputText size="10" id="txtProfesion"
							value="#{detalleAction.cliente.profesion}" style="font-weight:bold; font-size:15px; color:#008B8B; background-color:#F8F8FF"/>
					</p:column>
				</p:row>
				<p:row>
					<p:column>
						<h:outputLabel value="Sexo: " />
					</p:column>
					<p:column>
						<p:selectOneMenu id="txSexo" style="width:135px; font-weight:bold; font-size:15px; color:#008B8B; background-color:#F8F8FF"
							value="#{detalleAction.cliente.sexo}">
							<f:selectItem itemLabel="Select Sexo" itemValue="" />
							<f:selectItem itemLabel="Masculino" itemValue="M" />
							<f:selectItem itemLabel="Femenino" itemValue="F" />
						</p:selectOneMenu>
					</p:column>
					<p:column>
						<h:outputLabel value="Estado Civil: " />
					</p:column>
					<p:column>
						<p:selectOneMenu id="txtEdoC" style="width:135px;font-weight:bold; font-size:15px; color:#008B8B; background-color:#F8F8FF"
							value="#{detalleAction.cliente.edoCivil}">
							<f:selectItem itemLabel="Select estado" itemValue="" />
							<f:selectItem itemLabel="Soltero" itemValue="Soltero" />
							<f:selectItem itemLabel="Casado" itemValue="Casado" />
							<f:selectItem itemLabel="Viudo" itemValue="Viudo" />
							<f:selectItem itemLabel="Divorciado" itemValue="Divorciado" />
							<f:selectItem itemLabel="Union Libre" itemValue="UL" />
						</p:selectOneMenu>
					</p:column>
					<p:column>
						<h:outputLabel value="Fecha Nac: " />
					</p:column>
					<p:column>
						<p:calendar navigator="true" effect="fold" size="11"
							id="txtFchNac" value="#{detalleAction.cliente.fechaNacimiento}" style="font-weight:bold; font-size:15px; color:#008B8B; background-color:#F8F8FF" />
					</p:column>
					<p:column>
						<h:outputLabel value="Lugar Nac: " />
					</p:column>
					<p:column>
						<p:inputText size="10" id="txtLugN"
							value="#{detalleAction.cliente.lugarNacimiento}" style="font-weight:bold; font-size:15px; color:#008B8B; background-color:#F8F8FF" />
					</p:column>
				</p:row>
				<p:row>
					<p:column>
						<h:outputLabel value="Nacionalidad: " />
					</p:column>
					<p:column>
						<p:inputText size="10" id="txtNaciol"
							value="#{detalleAction.cliente.nacionalidad}" style="font-weight:bold; font-size:15px; color:#008B8B; background-color:#F8F8FF"/>
					</p:column>
					<p:column>
						<h:outputLabel value="Empresa: " />
					</p:column>
					<p:column>
						<p:inputText size="10" id="txtEmpresa"
							value="#{detalleAction.cliente.empresa}" style="font-weight:bold; font-size:15px; color:#008B8B; background-color:#F8F8FF" />
					</p:column>
					<p:column>
						<h:outputLabel value="Puesto: " />
					</p:column>
					<p:column>
						<p:inputText size="10" id="txtPuesto"
							value="#{detalleAction.cliente.puesto}" style="font-weight:bold; font-size:15px; color:#008B8B; background-color:#F8F8FF" />
					</p:column>
					<p:column>
						<h:outputLabel value="Tel Casa: " />
					</p:column>
					<p:column>
						<p:inputText size="10" id="txtTel"
							value="#{detalleAction.cliente.telefonoCasa}" style="font-weight:bold; font-size:15px; color:#008B8B; background-color:#F8F8FF"/>
					</p:column>
				</p:row>
				<p:row>
					<p:column>
						<h:outputLabel value="Celular: " />
					</p:column>
					<p:column>
						<p:inputText size="10" id="txtCelular"
							value="#{detalleAction.cliente.celular}" style="font-weight:bold; font-size:15px; color:#008B8B; background-color:#F8F8FF" />
					</p:column>
					<p:column>
						<h:outputLabel value="Mail: " />
					</p:column>
					<p:column>
						<p:inputText size="10" id="txtMail"
							value="#{detalleAction.cliente.mail}" style="font-weight:bold; font-size:15px; color:#008B8B; background-color:#F8F8FF" />
					</p:column>
					<p:column>
						<h:outputLabel value="Oficina: " />
					</p:column>
					<p:column>
						<p:inputText size="10" id="txtOficina"
							value="#{detalleAction.cliente.oficina}" style="font-weight:bold; font-size:15px; color:#008B8B; background-color:#F8F8FF" />
					</p:column>
					<p:column>
						<h:outputLabel value="Medio: " />
					</p:column>
					<p:column>
						<p:inputText size="10" id="txtMedio"
							value="#{detalleAction.cliente.medio}" style="font-weight:bold; font-size:15px; color:#008B8B; background-color:#F8F8FF"/>
					</p:column>
					
					<p:column>
						<h:outputLabel value="#{detalleAction.sts}" />
					</p:column>
					
										
				</p:row>

			</p:panelGrid>
			
			
			<center>
 			    <div style="width: 600px; height: 350px; overflow-y: scroll; position: relative;">
				<p:dataTable var="det" value="#{detalleAction.listPagos}" paginator="true" rowIndexVar="rowNum" rows="10" 
			paginatorPosition="bottom"
				paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
				rowsPerPageTemplate="5,10,50,100">
				<p:column  headerText="#" style="width:3px;">
			    <h:outputText value="#{rowNum+1}" />
			    </p:column>
               <p:column headerText="Monto Pago">
               <h:outputText value="#{det.pagos.monto}"  />
              </p:column>
 
             <p:column headerText="Fecha Pago">
             <h:outputText value="#{det.pagos.fchPago}" >
             <f:convertDateTime pattern="dd-MM-yyyy" />
             </h:outputText>
             </p:column> 
             <p:column headerText="Debe">
             <h:outputText  />
             </p:column> 
              </p:dataTable>
              </div>
              </center>
			


			<p:spacer width="100" height="20" />

			<p:tabView dynamic="true" cache="true" style="width:100%">
				<p:tab title="Conyuge">
					<p:panelGrid>
						<p:row>
							<p:column>
								<p:graphicImage value="/pages/imgs/conyuge.png" />
							</p:column>
							<p:column>
								<p:spacer width="20px" />
							</p:column>
							<p:column>
								<h:outputLabel value="Nombre: " />
							</p:column>
							<p:column>
								<p:inputText size="34" id="txtNomC"
									value="#{clienteAction.cliente.conyuge.nombre}" />
							</p:column>
							<p:column>
								<h:outputLabel value="Lugar de Nacimiento: " />
							</p:column>
							<p:column>
								<p:inputText size="15" id="txtLugar"
									value="#{clienteAction.cliente.conyuge.lugarNacimiento}" />
							</p:column>
							<p:column>
								<h:outputLabel value="Nacionalidad: " />
							</p:column>
							<p:column>
								<p:inputText size="15" id="txtNacio"
									value="#{clienteAction.cliente.conyuge.nacionalidad}" />
							</p:column>
						</p:row>
						<p:row>

							<p:column>
								<h:outputLabel value="Fecha Nacimiento: " />
							</p:column>
							<p:column>
								<p:calendar navigator="true" effect="fold" size="15"
									value="#{clienteAction.cliente.conyuge.fechaNacimiento}" />
							</p:column>
							<p:column>
								<h:outputLabel value="R.F.C: " />
							</p:column>
							<p:column>
								<p:inputText size="15" id="txtRfc"
									value="#{clienteAction.cliente.conyuge.rfc}" />
							</p:column>
							<p:column>
								<h:outputLabel value="Ocupación: " />
							</p:column>
							<p:column>
								<p:inputText size="15" id="txtOcu"
									value="#{clienteAction.cliente.conyuge.ocupacion}" />
							</p:column>
							<p:column>
								<h:outputLabel value="Teléfono: " />
							</p:column>
							<p:column>
								<p:inputText size="15" id="txtTelf"
									value="#{clienteAction.cliente.conyuge.telefono}" />
							</p:column>
						</p:row>
						<p:row>
							<p:column>
								<h:outputLabel value="Edad: " />
							</p:column>
							<p:column>
								<p:inputText size="15" id="txtEdad"
									value="#{clienteAction.cliente.conyuge.edad}" />
							</p:column>
						</p:row>

					</p:panelGrid>
				</p:tab>

				<p:tab title="Domicilio" >
					<p:panelGrid style="border:0">
						<p:row>
							<p:column>
								<p:graphicImage value="/pages/imgs/domicilio.jpg" />
							</p:column>

							<p:column>
								<h:outputLabel value="Calle, Numero, Colonia: " for="txtCalle" />
							</p:column>
							<p:column colspan="2">
								<p:inputText size="45" id="txtCalle"
									value="#{detalleAction.cliente.domicilio}" />
							</p:column>
							<p:column>
								<h:outputLabel value="Ciudad/Municipio: " for="txtCiudad" />
							</p:column>
							<p:column>
								<p:inputText size="15" id="txtCiudad"
									value="#{detalleAction.cliente.ciudad}" />
							</p:column>
						</p:row>
						<p:row>
							<p:column>
								<h:outputLabel value="Estado: " for="txtEstado" />
							</p:column>
							<p:column>
								<p:inputText size="10" id="txtEstado"
									value="#{detalleAction.cliente.estadoCliente}" />
							</p:column>
							<p:column>
								<h:outputLabel value="C.P.: " for="txtCp" />
							</p:column>
							<p:column>
								<p:inputText size="15" id="txtCp"
									value="#{detalleAction.cliente.codigoPostal}" />
							</p:column>
						</p:row>
					</p:panelGrid>
				</p:tab>
				<p:tab title="Referencia">
					<p:graphicImage value="/pages/imgs/referencias.jpg" />
					<center>
						<p:panelGrid style="margin-top:20px">
							<f:facet name="header">
								<p:row>
									<p:column style="width:50px">Nombre completo</p:column>
									<p:column style="width:25px">Telefono</p:column>
									<p:column style="width:25px">Parentesco</p:column>
								</p:row>

							</f:facet>

							<p:row>
								<p:column style="width:50%">
									<p:inputText size="50" id="txtRefNombre1"
										value="#{clienteAction.referencias[0].nombre}" />
								</p:column>
								<p:column style="width:25%">
									<p:inputText size="25" id="txtRefTele1"
										value="#{clienteAction.referencias[0].telefono}" />
								</p:column>
								<p:column style="width:25%">
									<p:inputText size="25" id="txtRefParent1"
										value="#{clienteAction.referencias[0].parentesco}" />
								</p:column>
							</p:row>
							
							<p:row>
								<p:column style="width:50%">
									<p:inputText size="50" id="txtRefNombre2"
										value="#{clienteAction.referencias[1].nombre}" />
								</p:column>
								<p:column style="width:25%">
									<p:inputText size="25" id="txtRefTele2"
										value="#{clienteAction.referencias[1].telefono}" />
								</p:column>
								<p:column style="width:25%">
									<p:inputText size="25" id="txtRefParent2"
										value="#{clienteAction.referencias[1].parentesco}" />
								</p:column>
							</p:row>
							
							<p:row>
								<p:column style="width:50%">
									<p:inputText size="50" id="txtRefNombre3"
										value="#{clienteAction.referencias[2].nombre}" />
								</p:column>
								<p:column style="width:25%">
									<p:inputText size="25" id="txtRefTele3"
										value="#{clienteAction.referencias[2].telefono}" />
								</p:column>
								<p:column style="width:25%">
									<p:inputText size="25" id="txtRefParent3"
										value="#{clienteAction.referencias[2].parentesco}" />
								</p:column>
							</p:row>

						</p:panelGrid>
					</center>
				</p:tab>
				<p:tab title="Beneficiarios">
					<p:graphicImage value="/pages/imgs/beneficiarios.jpg" />
					<center>
						<p:panelGrid style="margin-top:20px">
							<f:facet name="header">
								<p:row>
									<p:column style="width:50px">Nombre completo</p:column>
									<p:column style="width:25px">Porcentaje</p:column>
									<p:column style="width:25px">Parentesco</p:column>
								</p:row>

							</f:facet>
							<p:row>
								<p:column style="width:50%">
									<p:inputText size="50" id="txtBenNombre1"
										value="#{clienteAction.beneficiarios[0].nombre}" />
								</p:column>
								<p:column style="width:25%">
									<p:inputText size="25" id="txtBenTele1"
										value="#{clienteAction.beneficiarios[0].porcentaje}" />
								</p:column>
								<p:column style="width:25%">
									<p:inputText size="25" id="txtBenParent1"
										value="#{clienteAction.beneficiarios[0].parentesco}" />
								</p:column>
							</p:row>
							
							<p:row>
								<p:column style="width:50%">
									<p:inputText size="50" id="txtBenNombre2"
										value="#{clienteAction.beneficiarios[1].nombre}" />
								</p:column>
								<p:column style="width:25%">
									<p:inputText size="25" id="txtBenTele2"
										value="#{clienteAction.beneficiarios[1].porcentaje}" />
								</p:column>
								<p:column style="width:25%">
									<p:inputText size="25" id="txtBenParent2"
										value="#{clienteAction.beneficiarios[1].parentesco}" />
								</p:column>
							</p:row>
							
							<p:row>
								<p:column style="width:50%">
									<p:inputText size="50" id="txtBenNombre3"
										value="#{clienteAction.beneficiarios[2].nombre}" />
								</p:column>
								<p:column style="width:25%">
									<p:inputText size="25" id="txtBenTele3"
										value="#{clienteAction.beneficiarios[2].porcentaje}" />
								</p:column>
								<p:column style="width:25%">
									<p:inputText size="25" id="txtBenParent3"
										value="#{clienteAction.beneficiarios[2].parentesco}" />
								</p:column>
							</p:row>
						</p:panelGrid>
					</center>
				</p:tab>
				<p:tab title="Tabla Pagos">
				<center>
 			    <div style="width: 600px; height: 350px; overflow-y: scroll; position: relative;">
				<p:dataTable var="det" value="#{detalleAction.listPagos}" paginator="true" rowIndexVar="rowNum" rows="10" 
			paginatorPosition="bottom"
				paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
				rowsPerPageTemplate="5,10,50,100">
				<p:column  headerText="#" style="width:3px;">
			    <h:outputText value="#{rowNum+1}" />
			    </p:column>
               <p:column headerText="Monto Pago">
               <h:outputText value="#{det.apertura.monto}"  />
              </p:column>
 
             <p:column headerText="Fecha Pago">
             <h:outputText value="#{det.fecha}" />
             </p:column> 
             <p:column headerText="Debe">
             <h:outputText  />
             </p:column> 
              </p:dataTable>
              </div>
              </center>
				</p:tab>
			</p:tabView>
			<p:spacer height="20px" />
			<center>
				<p:panelGrid style="background-color: #F9F9F9">
					<p:row>
						<p:column style="background-color: #F9F9F9">
							<p:commandButton update="messages" value="Editar"
								action="#{clienteAction.guardar}" ajax="false" />
						</p:column>
						<p:column style="background-color: #F9F9F9">
							<p:commandButton value="Regresar" action="#{detalleAction.regresar}" />
						</p:column>
					</p:row>
				</p:panelGrid>
			</center>


			<p:dialog id="procesando" header="" widgetVar="dlgP" modal="true"
				showEffect="puff" hideEffect="fold" draggable="false"
				resizable="false" closable="false">
				<div id="datos" class="script-tittle">Procesando...</div>
				<div id="dlgspace1"
					style="width: 100%; margin: 0px 0px 20px 0px; padding: 0px 0px 0px 0px;">
				</div>
				<div id="botonesdlgP" style="width: 100%; text-align: center;">
					<p:graphicImage value="imgs/globe64.gif" />
				</div>
			</p:dialog>
		</h:form>
	</ui:define>

</ui:composition>
</html>

